import React from "react";
import { IMainMenu } from '@/models/IMainMenu';
import styles from "./MainMenu.less"
import { Menu } from 'antd';
import { MenuItemC } from './MenuItemC';

/**子菜单 */
export class SubMenuC extends React.Component<ISubMenuProps> {

    render() {
        const children = this.props.children ?? []
        return <div className={styles.menusBox}>
            <div className={styles.menusBoxList}>
                <Menu mode="inline">
                    {children.map(menu => {
                        return this.renderMenu(menu)
                    })}
                </Menu>
            </div>
        </div>
    }

    private renderMenu(menu: IMainMenu) {
        // 当前菜单的子菜单
        const subMenus = menu.children
        if (subMenus.length < 1) {
            // 没有子菜单
            return <Menu.Item key={menu.id}>
                <MenuItemC disableLink={this.props.disableLink} menu={menu} onClick={() => this.props.onClick?.(menu)} />
            </Menu.Item>
        } else {
            return <Menu.SubMenu key={menu.id}
                title={<MenuItemC disableLink={this.props.disableLink} menu={menu} onClick={() => this.props.onClick?.(menu)} />}>
                {subMenus.map(sub => {
                    return this.renderMenu(sub)
                })}
            </Menu.SubMenu>
        }
    }

}

export interface ISubMenuProps {
    /**父菜单ID */
    parentId?: string
    children?: IMainMenu[]
    disableLink?: boolean

    onClick?: (menu: IMainMenu) => void
}